<template>
    <div class="colorPicker">
        <div class="colorPicker_span"></div>
        <div class="colorPicker_panel">
            <el-select size="mini" v-model="colorType" class="colorType">
                <el-option label="纯色" :value="1"></el-option>
                <el-option label="渐变" :value="2"></el-option>
            </el-select>
            <div class="gradual">
                <div class="gradual_colorBar">
                    <div class="gradual_colorBar_color"
                         :style="{'background': 'linear-gradient(90deg, '+'rgba({0},{1},{2},{3})'.format(gradual.startColor.r, gradual.startColor.g, gradual.startColor.b, gradual.startColor.a/100)+' '+gradual.startX*100/120+'%, '+'rgba({0},{1},{2},{3})'.format(gradual.endColor.r, gradual.endColor.g, gradual.endColor.b, gradual.endColor.a/100)+' ' + gradual.endX*100/120 + '%)'}"></div>
                    <div class="gradual_colorBar_pointer" v-on:mousedown="mousedownEvent($event, 'startGradualX')"
                         :class="gradual.selectIndex===1?'is-active':''"
                         :style="{'background-color': 'rgba({0},{1},{2},{3})'.format(gradual.startColor.r, gradual.startColor.g, gradual.startColor.b, gradual.startColor.a/100), 'left': 'calc(' + gradual.startX*100/120 + '% - 6px)'}"></div>
                    <div class="gradual_colorBar_pointer" v-on:mousedown="mousedownEvent($event, 'endGradualX')"
                         :class="gradual.selectIndex===2?'is-active':''"
                         :style="{'background-color': 'rgba({0},{1},{2},{3})'.format(gradual.endColor.r, gradual.endColor.g, gradual.endColor.b, gradual.endColor.a/100), 'left': 'calc(' + gradual.endX*100/120 + '% - 6px)'}"></div>
                </div>
                <div class="gradual_rotateBar" ref="rotateBar" @mousedown="mousedownAngle($event, 'changeDeg')">
                    <div class="gradual_rotateBar_center"
                         :style="{'transform':'rotate('+(90+gradual.deg)+'deg)'}"></div>
                </div>
                <div class="gradual_rotateInput">
                    <el-input size="mini" v-model="gradual.deg"></el-input>
                </div>
                <div class="gradual_showBar">
                    <div class="gradual_showBar_color"
                         :style="{'background': 'linear-gradient({0}deg, {1} {2}%, {3} {4}%)'.format(gradual.deg, 'rgba({0},{1},{2},{3})'.format(gradual.startColor.r, gradual.startColor.g, gradual.startColor.b, gradual.startColor.a/100), gradual.startX*100/120, 'rgba({0},{1},{2},{3})'.format(gradual.endColor.r, gradual.endColor.g, gradual.endColor.b, gradual.endColor.a/100), gradual.endX*100/120)}"></div>
                </div>
            </div>
            <div class="colorPanel">
                <div class="colorPanel_main">
                    <div class="b-layer" v-on:mousedown="mousedownEvent($event, 'colorBar')"
                         v-on:click="clickColorSlider($event, 'colorBar')"
                         :style="{'background-color': 'rgb({0},{1},{2})'.format(colorConfig.R, colorConfig.G, colorConfig.B)}">
                        <div class="b-layer-curser"
                             :style="{'left': colorConfig.s>98? 'calc(100% - 8px)' : colorConfig.s + '%', 'top': (colorConfig.v<2 ? 'calc(100% - 8px)' : (100-colorConfig.v) + '%')}"></div>
                    </div>
                    <div class="s-layer"></div>
                    <div class="v-layer"></div>
                </div>
                <div class="colorPanel_bar">
                    <div class="colorPanel_bar_left">
                        <div class="colorPanel_bar_left_span color">
                            <div class="colorPanel_bar_left_span_bg"
                                 v-on:click="clickColorSlider($event, 'colorSlider')"></div>
                            <div class="colorPanel_bar_left_span_slider"
                                 v-on:mousedown="mousedownEvent($event, 'colorSlider')"
                                 :style="{'left': parseFloat(colorConfig.h/360*100)+'%'}"></div>
                        </div>
                        <div class="colorPanel_bar_left_span opacity">
                            <div class="colorPanel_bar_left_span_bg"
                                 :style="{'background': 'linear-gradient(to right, transparent 0%, rgb({0}, {1}, {2}) 100%)'.format(colorConfig.r, colorConfig.g, colorConfig.b)}"
                                 v-on:click="clickColorSlider($event, 'opacitySlider')"></div>
                            <div class="colorPanel_bar_left_span_slider"
                                 v-on:mousedown="mousedownEvent($event, 'opacitySlider')"
                                 :style="{'left': parseFloat(colorConfig.a)+'%'}"></div>
                        </div>
                    </div>
                    <div class="colorPanel_bar_right">
                        <div class="colorPanel_bar_right_center"
                             :style="{'background': 'rgba({0}, {1}, {2}, {3})'.format(colorConfig.r, colorConfig.g, colorConfig.b, colorConfig.a/100)}"></div>
                    </div>
                </div>
                <div class="colorPanel_input _unSelect">
                    <div class="colorPanel_input_span hex">
                        <el-input size="mini" v-model="colorConfig.hexColor" v-on:change="hexToRgb"></el-input>
                    </div>
                    <div class="colorPanel_input_span r">
                        <el-input size="mini" type="number" :min="0" :max="255" v-model="colorConfig.r"
                                  v-on:input="rgbToHsv"></el-input>
                    </div>
                    <div class="colorPanel_input_span g">
                        <el-input size="mini" type="number" :min="0" :max="255" v-model="colorConfig.g"
                                  v-on:input="rgbToHsv"></el-input>
                    </div>
                    <div class="colorPanel_input_span b">
                        <el-input size="mini" type="number" :min="0" :max="255" v-model="colorConfig.b"
                                  v-on:input="rgbToHsv"></el-input>
                    </div>
                    <div class="colorPanel_input_span a">
                        <el-input size="mini" type="number" :min="0" :max="100" v-model="colorConfig.a"></el-input>
                    </div>
                </div>
            </div>
            <div class="usePanel _unSelect">
                <div class="usePanel_select">
                    <el-select v-model="useType" size="mini">
                        <el-option label="最近常用" :value="1"></el-option>
                        <el-option label="主题及辅助色" :value="2"></el-option>
                        <el-option label="文本色" :value="3"></el-option>
                        <el-option label="边框色" :value="4"></el-option>
                    </el-select>
                </div>
                <div class="usePanel_list use">
                    <template v-for="item in predefineColors" v-bind:key="item.color">
                        <div class="userSpan" v-if="item.type === useType">
                            <li :style="{'background': item.color}" v-on:click="chooseColor(item.color)"></li>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {reactive, ref, getCurrentInstance} from 'vue';
    import $ from "jquery";

    export default {
        components: {},
        props: {
            projectWindowConfig: {
                type: Object,
                default: null
            }
        },
        data() {
            return {}
        },
        methods: {},
        watch: {},
        setup(props) {
            const {proxy} = getCurrentInstance()
            const modelColor = reactive();
            const colorType = ref(1);
            const moveType = ref()
            const useType = ref(1)
            const gradual = reactive({
                startColor: {r: 255, g: 255, b: 255, a: 100},
                endColor: {r: 0, g: 0, b: 0, a: 100},
                startX: 10,
                endX: 100,
                deg: 0,
                selectIndex: 1
            })
            const colorConfig = reactive({
                hexColor: '#000',
                r: 255,
                g: 0,
                b: 0,
                a: 100,
                h: 0,
                s: 100,
                v: 100,
                R: 255,
                G: 0,
                B: 0
            })
            const predefineColors = ref([{color: props.projectWindowConfig.colors.main, type: 2},
                {color: props.projectWindowConfig.colors.success, type: 2},
                {color: props.projectWindowConfig.colors.warning, type: 2},
                {color: props.projectWindowConfig.colors.danger, type: 2},
                {color: props.projectWindowConfig.colors.info, type: 2},
                {color: props.projectWindowConfig.colors.font1, type: 3},
                {color: props.projectWindowConfig.colors.font2, type: 3},
                {color: props.projectWindowConfig.colors.font3, type: 3},
                {color: props.projectWindowConfig.colors.font4, type: 3},
                {color: props.projectWindowConfig.colors.border1, type: 4},
                {color: props.projectWindowConfig.colors.border2, type: 4},
                {color: props.projectWindowConfig.colors.border3, type: 4},
                {color: props.projectWindowConfig.colors.border4, type: 4}])

            let startMove = false
            // 移动选择
            const mousedownEvent = function (e, type) {
                startMove = true
                moveType.value = type
                let startX = 0
                let startY = 0
                switch (moveType.value) {
                    case 'startGradualX':
                        startX = JSON.parse(JSON.stringify(gradual.startX))
                        gradual.selectIndex = 1
                        colorConfig.r = gradual.startColor.r
                        colorConfig.g = gradual.startColor.g
                        colorConfig.b = gradual.startColor.b
                        colorConfig.a = gradual.startColor.a
                        rgbToHsv()
                        break
                    case 'endGradualX':
                        startX = JSON.parse(JSON.stringify(gradual.endX))
                        gradual.selectIndex = 2
                        colorConfig.r = gradual.endColor.r
                        colorConfig.g = gradual.endColor.g
                        colorConfig.b = gradual.endColor.b
                        colorConfig.a = gradual.endColor.a
                        rgbToHsv()
                        break
                    case 'colorSlider':
                        startX = JSON.parse(JSON.stringify(colorConfig.h))
                        break
                    case 'opacitySlider':
                        startX = JSON.parse(JSON.stringify(colorConfig.a))
                        setColorSlider()
                        break
                    case 'colorBar':
                        colorConfig.s = parseFloat((e.offsetX - 4) / 242 * 100)
                        colorConfig.v = 100 - parseFloat((e.offsetY - 4) / 120 * 100)
                        hsvToRgb('colorBar')
                        startX = JSON.parse(JSON.stringify(colorConfig.s))
                        startY = JSON.parse(JSON.stringify(colorConfig.v))
                        break
                }
                let startPageX = e.pageX
                let startPageY = e.pageY
                $(document).mousemove(function (m) {
                    if (startMove) {
                        let moveX = 0
                        let moveY = 0
                        switch (moveType.value) {
                            case 'startGradualX':
                                moveX = startX + m.pageX - startPageX
                                if (moveX <= 0) moveX = 0
                                if (moveX > 120) moveX = 120
                                gradual.startX = moveX
                                break
                            case 'endGradualX':
                                moveX = startX + m.pageX - startPageX
                                if (moveX <= 0) moveX = 0
                                if (moveX > 120) moveX = 120
                                gradual.endX = moveX
                                break
                            case 'colorSlider':
                                moveX = (m.pageX - startPageX) * 360 / 200 + startX
                                if (moveX <= 0) moveX = 0
                                if (moveX > 360) moveX = 360
                                colorConfig.h = moveX
                                hsvToRgb('colorSlider')
                                break
                            case 'opacitySlider':
                                moveX = startX / 100 * 200 + m.pageX - startPageX
                                if (moveX <= 0) moveX = 0
                                if (moveX > 200) moveX = 200
                                colorConfig.a = parseInt(moveX * 0.5)
                                break
                            case 'colorBar':
                                moveX = startX / 100 * 242 + m.pageX - startPageX
                                moveY = (100 - startY) / 100 * 120 + m.pageY - startPageY
                                if (moveX <= 0) moveX = 0
                                if (moveX > 242) moveX = 242
                                if (moveY <= 0) moveY = 0
                                if (moveY > 120) moveY = 120
                                colorConfig.s = parseFloat(moveX / 242 * 100)
                                colorConfig.v = 100 - parseFloat(moveY / 120 * 100)
                                hsvToRgb('colorBar')
                                break
                        }
                    }
                    e.stopPropagation()
                })
                $(document).mouseup(function () {
                    startMove = false
                    e.stopPropagation()
                })
            }
            // 角度选择方法
            const mousedownAngle = function (e, type) {
                startMove = true
                moveType.value = type
                const calcDeg = function (p) {
                    let rotateBar = proxy.$refs.rotateBar;
                    let centerX = -~(rotateBar.offsetHeight || rotateBar.height) / 2;
                    let centerY = -~(rotateBar.offsetWidth || rotateBar.width) / 2;
                    let radians = Math.atan2(p.offsetX - centerX, p.offsetY - centerY);
                    let deg = parseInt((radians * (180 / Math.PI) * -1) + 180)
                    return deg
                }
                gradual.deg = calcDeg(e)
                $(document).mousemove(function (m) {
                    if (startMove && moveType.value === 'changeDeg') {
                        gradual.deg = calcDeg(m)
                    }
                })
                $(document).mouseup(function () {
                    startMove = false
                    e.stopPropagation()
                })
            }
            // HSV颜色值转换为RGB.
            const hsvToRgb = function (type) {
                var h = colorConfig.h,
                    s = (type !== 'colorSlider' && type !== 'rgbChange') ? colorConfig.s : 100,
                    v = (type !== 'colorSlider' && type !== 'rgbChange') ? colorConfig.v : 100;
                s = s / 100;
                v = v / 100;
                var r = 0, g = 0, b = 0;
                var i = parseInt((h / 60) % 6);
                var f = h / 60 - i;
                var p = v * (1 - s);
                var q = v * (1 - f * s);
                var t = v * (1 - (1 - f) * s);
                switch (i) {
                    case 0:
                        r = v;
                        g = t;
                        b = p;
                        break;
                    case 1:
                        r = q;
                        g = v;
                        b = p;
                        break;
                    case 2:
                        r = p;
                        g = v;
                        b = t;
                        break;
                    case 3:
                        r = p;
                        g = q;
                        b = v;
                        break;
                    case 4:
                        r = t;
                        g = p;
                        b = v;
                        break;
                    case 5:
                        r = v;
                        g = p;
                        b = q;
                        break;
                    default:
                        break;
                }
                r = parseInt(r * 255.0)
                g = parseInt(g * 255.0)
                b = parseInt(b * 255.0)

                switch (type) {
                    case "colorBar" :
                        colorConfig.r = r
                        colorConfig.g = g
                        colorConfig.b = b
                        break
                    case "colorSlider" :
                        colorConfig.r = r
                        colorConfig.g = g
                        colorConfig.b = b
                        colorConfig.R = r
                        colorConfig.G = g
                        colorConfig.B = b
                        break
                    case "rgbChange" :
                        colorConfig.R = r
                        colorConfig.G = g
                        colorConfig.B = b
                        break
                }
                rgbToHex()
            }
            // RGB颜色值转换为HSV.
            const rgbToHsv = function () {
                let arr = [colorConfig.r, colorConfig.g, colorConfig.b]
                var h = 0, s = 0, v = 0;
                var r = arr[0], g = arr[1], b = arr[2];
                arr.sort(function (a, b) {
                    return a - b;
                })
                var max = arr[2]
                var min = arr[0];
                v = max / 255;
                if (max === 0) {
                    s = 0;
                } else {
                    s = 1 - (min / max);
                }
                if (max === min) {
                    h = 0;//事实上，max===min的时候，h无论为多少都无所谓
                } else if (max === r && g >= b) {
                    h = 60 * ((g - b) / (max - min)) + 0;
                } else if (max === r && g < b) {
                    h = 60 * ((g - b) / (max - min)) + 360
                } else if (max === g) {
                    h = 60 * ((b - r) / (max - min)) + 120
                } else if (max === b) {
                    h = 60 * ((r - g) / (max - min)) + 240
                }
                h = parseInt(h);
                s = parseInt(s * 100);
                v = parseInt(v * 100);

                colorConfig.h = h
                colorConfig.s = s
                colorConfig.v = v
                hsvToRgb('rgbChange')
                rgbToHex()
            }
            // HEX转RGB
            const hexToRgb = function () {
                const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
                const hex = colorConfig.hexColor.replace(rgx, (m, r, g, b) => r + r + g + g + b + b);
                const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                const r = parseInt(rgb[1], 16);
                const g = parseInt(rgb[2], 16);
                const b = parseInt(rgb[3], 16)

                colorConfig.r = r
                colorConfig.g = g
                colorConfig.b = b
                rgbToHsv()
            }
            // RGB转HEX
            const rgbToHex = function () {
                let hex = '#' + (1 << 24 | colorConfig.r << 16 | colorConfig.g << 8 | colorConfig.b).toString(16).substring(1);
                colorConfig.hexColor = hex
                setColorSlider()
            }
            // 点击选择事件
            const clickColorSlider = function (e, type) {
                switch (type) {
                    case 'colorSlider':
                        colorConfig.h = (e.offsetX - 4) * 360 / 200
                        hsvToRgb('colorSlider')
                        break
                    case 'opacitySlider':
                        colorConfig.a = parseInt((e.offsetX - 4) * 0.5)
                        setColorSlider()
                        break
                    case 'colorBar':
                        colorConfig.s = parseFloat((e.offsetX - 4) / 242 * 100)
                        colorConfig.v = 100 - parseFloat((e.offsetY - 4) / 120 * 100)
                        hsvToRgb('colorBar')
                        break
                }
            }
            // 设置渐变颜色
            const setColorSlider = function () {
                if (colorType.value === 2) {
                    if (gradual.selectIndex === 1) {
                        gradual.startColor = {r: colorConfig.r, g: colorConfig.g, b: colorConfig.b, a: colorConfig.a}
                    } else if (gradual.selectIndex === 2) {
                        gradual.endColor = {r: colorConfig.r, g: colorConfig.g, b: colorConfig.b, a: colorConfig.a}
                    }
                }
            }
            const chooseColor = function (color) {
                colorConfig.hexColor = color
                hexToRgb()
                colorConfig.a = 100
            }
            return {
                modelColor,
                colorType,
                gradual,
                useType,
                colorConfig,
                mousedownEvent,
                mousedownAngle,
                clickColorSlider,
                rgbToHsv,
                hexToRgb,
                chooseColor,
                predefineColors
            }
        }
    }
</script>
<style scoped lang="scss">
    .colorPicker {
        position: relative;

        .colorPicker_span {
            width: 20px;
            height: 20px;
            border-radius: 100px;
            background: #eee;
        }

        .colorPicker_panel {
            width: 242px;
            height: auto;
            padding: 10px;
            background: #fff;
            box-shadow: 0 0 10px rgb(0 0 0 / 15%);
            position: absolute;
            right: 0;
            top: 0;
            z-index: 100;

            .colorType {
                width: 100%;

                :deep(input) {
                    background: var(--bg-page);
                    border: 0;
                }
            }

            .gradual {
                height: 20px;
                position: relative;
                margin-bottom: 24px;
                display: flex;
                align-items: center;
                margin-top: 10px;

                .gradual_colorBar {
                    width: 150px;
                    height: 20px;
                    border-radius: 100px;
                    background: #eee;
                    position: relative;
                    margin-right: 10px;
                    background-image: url("../../../img/clear1.png");

                    .gradual_colorBar_color {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        border-radius: 100px;
                    }

                    .gradual_colorBar_pointer {
                        width: 10px;
                        height: 10px;
                        border: 1px solid var(--font-hc);
                        position: absolute;
                        top: 18px;
                        left: 10px;
                        cursor: pointer;

                        &.is-active {
                            &:after {
                                border-bottom-color: #fff;
                            }
                        }

                        &:after {
                            content: "";
                            width: 0;
                            height: 0;
                            border-bottom: 3px solid #fff;
                            border-left: 3px solid transparent;
                            border-right: 3px solid transparent;
                            position: absolute;
                            top: -4px;
                            left: 1px;
                            z-index: 2;
                        }

                        &:after {
                            border-bottom: 6px solid var(--font-hc);
                            border-left: 6px solid transparent;
                            border-right: 6px solid transparent;
                            left: -1px;
                            z-index: 1;
                            top: -6px;
                        }
                    }
                }

                .gradual_rotateBar {
                    position: relative;
                    width: 20px;
                    height: 20px;
                    border: 1px solid #666;
                    border-radius: 50%;
                    cursor: pointer;
                    flex-shrink: 0;

                    .gradual_rotateBar_center {
                        width: 100%;
                        height: 100%;
                        position: relative;
                        pointer-events: none;

                        &:after {
                            content: "";
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transform: rotate(0deg);
                            width: 50%;
                            height: 1px;
                            background-color: #666;
                        }
                    }
                }

                .gradual_rotateInput {
                    position: relative;
                    margin: 0 10px 0 5px;

                    &:after {
                        content: "°";
                        position: absolute;
                        top: 0;
                        right: 0;
                    }

                    :deep(input) {
                        border: 0;
                        width: 40px;
                        padding: 0;
                        text-align: center;
                        background: var(--bg-page);
                    }
                }

                .gradual_showBar {
                    width: 20px;
                    height: 20px;
                    border-radius: 2px;
                    background-image: url("../../../img/clear1.png");
                    position: relative;

                    .gradual_showBar_color {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        border-radius: 2px;
                    }
                }
            }

            .colorPanel {
                width: 100%;

                .colorPanel_main {
                    width: 242px;
                    height: 120px;
                    margin-bottom: 20px;
                    position: relative;

                    .s-layer,
                    .v-layer,
                    .b-layer {
                        position: absolute;
                        width: 100%;
                        height: 100%;

                        .b-layer-curser {
                            width: 10px;
                            height: 10px;
                            position: absolute;
                            left: 100%;
                            top: 0px;
                            cursor: pointer;
                            pointer-events: none;

                            &:after {
                                content: "";
                                width: 100%;
                                height: 100%;
                                border: 2px solid #fff;
                                position: absolute;
                                left: 0;
                                top: 0;
                                cursor: pointer;
                                border-radius: 100px;
                                box-sizing: border-box;
                                box-shadow: 0 0 5px 2px #afafaf;
                                z-index: 5;
                            }
                        }
                    }

                    .s-layer {
                        background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
                        pointer-events: none;
                    }

                    .v-layer {
                        background: linear-gradient(transparent 0%, black 100%);
                        pointer-events: none;
                    }
                }

                .colorPanel_bar {
                    display: flex;

                    .colorPanel_bar_left {
                        flex: 1;

                        .colorPanel_bar_left_span {
                            width: 100%;
                            height: 10px;
                            -webkit-border-radius: 10px;
                            -moz-border-radius: 10px;
                            border-radius: 10px;
                            position: relative;
                            cursor: pointer;

                            .colorPanel_bar_left_span_bg {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                left: 0;
                                top: 0;
                                z-index: 199;
                                -webkit-border-radius: 10px;
                                -moz-border-radius: 10px;
                                border-radius: 10px;
                            }

                            .colorPanel_bar_left_span_slider {
                                position: absolute;
                                top: -1px;
                                width: 5px;
                                height: 12px;
                                background: rgb(246, 247, 248);
                                box-shadow: rgb(0 0 0 / 50%) 0px 0px 2px 0px;
                                border-radius: 3px;
                                cursor: pointer;
                                z-index: 200;
                            }

                            &:first-child {
                                margin-bottom: 4px;
                            }

                            &.opacity {
                                background-image: linear-gradient(45deg, rgb(204, 204, 204) 25%, transparent 25%), linear-gradient(-45deg, rgb(204, 204, 204) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(204, 204, 204) 75%), linear-gradient(-45deg, transparent 75%, rgb(204, 204, 204) 75%);
                                background-size: 6px 6px;
                                background-position: 0px 0px, 0px 3px, 3px -3px, -3px 0px;
                                position: relative;
                            }

                            &.color {
                                background-image: linear-gradient(to left, red, rgb(255, 0, 128), magenta, rgb(128, 0, 255), blue, rgb(0, 128, 255), cyan, rgb(0, 255, 128), lime, rgb(128, 255, 0), yellow, rgb(255, 128, 0), red);
                            }
                        }
                    }

                    .colorPanel_bar_right {
                        width: 24px;
                        height: 24px;
                        border-radius: 2px;
                        margin-left: 18px;
                        position: relative;
                        background-image: linear-gradient(45deg, rgb(204, 204, 204) 25%, transparent 0px), linear-gradient(-45deg, rgb(204, 204, 204) 25%, transparent 0px), linear-gradient(45deg, transparent 75%, rgb(204, 204, 204) 0px), linear-gradient(-45deg, transparent 75%, rgb(204, 204, 204) 0px);
                        background-size: 12px 12px;
                        background-position: -1px -1px, -1px 5px, 5px -7px, -7px -1px;

                        .colorPanel_bar_right_center {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            -webkit-border-radius: 2px;
                            -moz-border-radius: 2px;
                            border-radius: 2px;
                        }
                    }
                }

                .colorPanel_input {
                    height: 40px;
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0;

                    .colorPanel_input_span {
                        width: 15%;
                        position: relative;

                        :deep(input) {
                            border: 0;
                            padding: 0;
                            text-align: center;
                            background: var(--bg-page);
                        }

                        &:after {
                            width: 100%;
                            height: 20px;
                            text-align: center;
                            position: absolute;
                            bottom: -10px;
                            left: 0;
                            color: var(--font-hc);
                            font-size: 13px;
                        }

                        &.hex {
                            width: 24%;

                            &:after {
                                content: "Hex";
                            }
                        }

                        &.r {
                            &:after {
                                content: "R";
                            }
                        }

                        &.g {
                            &:after {
                                content: "G";
                            }
                        }

                        &.b {
                            &:after {
                                content: "B";
                            }
                        }

                        &.a {
                            &:after {
                                content: "A";
                            }
                        }
                    }
                }
            }

            .usePanel {
                margin-top: 20px;
                border-top: 1px solid var(--border-bd);
                padding-top: 5px;

                .usePanel_select {
                    :deep(.el-select) {
                        width: 100px;
                    }

                    :deep(input) {
                        border: 0;
                        padding: 0;
                    }
                }

                .usePanel_list {
                    width: 100%;
                    padding: 10px 0;

                    &.use {
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0px;

                        .userSpan {
                            list-style: none;
                            width: 18px;
                            height: 18px;
                            cursor: pointer;
                            margin-top: 10px;
                            position: relative;

                            &.is-active {
                                &:after {
                                    content: '\e63e';
                                    font-family: 'iconfont';
                                    width: 100%;
                                    height: 100%;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                }
                            }

                            &:not(:nth-child(9n)) {
                                margin-right: 10px;
                            }

                            li {
                                height: 100%;
                                box-sizing: border-box;
                                border-radius: 2px;
                                border: 1px solid rgba(0, 0, 0, 0.08);
                            }
                        }
                    }
                }
            }
        }
    }
</style>
